<template>
  <div class="home" @scroll="scroll">
    <cols-header class="border fixed" v-show="show"></cols-header>
    <div class="home_content" @click="goSign">
      <!-- 
        v-model 使用在input标签上表示的是v-bind 和 @input的集合
        v-model 使用在select标签上表示的是v-bind 和 @chenge的集合
       -->
      <!-- <my-input v-model="content" type="password" placeholder="请输入密码"></my-input>
      <my-button type="primary">点击</my-button>
      <my-button type="danger">删除</my-button>
      <my-button type="warn">编辑</my-button>
      <my-button>保存</my-button> -->
      <my-swiper :banners="banners"></my-swiper>
    </div>
  </div>
</template>

<script>
import colsHeader from '@/components/colsHeader/colsHeader'
import myInput from '@/components/myInput/myInput'
import myButton from '@/components/myButton/myButton'
import mySwiper from '@/components/mySwiper/mySwiper'
import { getBanners } from '@/utils/api/home'
export default {
  name: 'Home',
  components: {
    colsHeader,
    myInput,
    myButton,
    mySwiper
  },
  data() {
    return {
      show: false,
      content: '',
      banners: []
    }
  },
  created() {
    // 请求轮播图数据
    getBanners().then(res => {
      // console.log(res)
      this.banners = res
    })
  },

  methods: {
    scroll(e) {
      // console.log(e.target.scrollTop)
      this.show = e.target.scrollTop > 400 ? true : false
    },

    goSign() {
        // this.$router.push({
        //     name: 'sign'
        // })
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    .home_content{
      height: 2000px;
      // background-image: linear-gradient(red, blue, yellow, green);
    }
    .fixed{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
    }
  }
  
</style>
